<template>
  <div id="app">
    <NoteHeader @addTask="add"></NoteHeader>
    <NoteBody :tasks="tasks"  @del="del"></NoteBody>
    <NoteFooter :tasks="tasks"  @clear="clear"></NoteFooter>
  </div>
</template>

<script>
import NoteHeader from './components/NoteHeader.vue'
import NoteBody from './components/NoteBody.vue'
import NoteFooter from './components/NoteFooter.vue'

export default {
  name: 'App',
  components: {
    NoteHeader,
    NoteBody,
    NoteFooter
  },
  data() {
    return {
      tasks: (localStorage.getItem('tasks') ? JSON.parse(localStorage.getItem('tasks')) : null) || []
    }
  },
  methods: {
    setTask() {
      localStorage.setItem('tasks', JSON.stringify(this.tasks))
    },
    add(taskName) {
      if (!taskName || !taskName.trim()) {
        alert('任务名称不能为空..')
        return
      }
      this.tasks.push(taskName)
      this.setTask()
    },
    keyAdd(event) {
      // console.log(event);
      if (event.code === 'Enter') {
        this.add()
      }
    },
    del(i) {
      this.tasks.splice(i, 1)
      this.setTask()
    },
    clear() {
      this.tasks = []
      this.setTask()
    },
    sts(event) {
      alert(123)
      event.preventDefault()
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
